<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid;
            float: left;
            margin-left: 20px;
            text-align: center;
            line-height: 200px;
        }

        .box1 {
            background-image: radial-gradient(red, yellow, green);
        }

        .box2 {
            background-image: radial-gradient(at right top, red, yellow, green);
        }

        .box3 {
            background-image: radial-gradient(at 100px 50px, red, yellow, green);
        }

        .box4 {
            background-image: radial-gradient(circle, red, yellow, green);
        }

        .box5 {
            background-image: radial-gradient(100px 100px, red, yellow, green);
        }

        .box6 {
            background-image: radial-gradient(red 50px, yellow 100px, green 150px);
        } 

        .box7 {
            background-image: radial-gradient(100px 50px at 150px 150px, red 50px, yellow 100px, green 150px);
        } 

        
    </style>
</head>
<body>

    <div class="box box1">默认情况</div>
    <div class="box box2">通过关键词调整圆心的位置</div>
    <div class="box box3">通过像素值调整径向渐变圆的圆心</div>
    <div class="box box4">通过circle关键字调整为正圆</div>
    <div class="box box5">通过圆的长轴和纵轴像素调整为正圆</div>
    <div class="box box6">通过距离控制颜色的渐变</div>
    <div class="box box7">综合写法</div>
    
</body>
</html>